<template>
  <div>
    <x-header :left-options="{backText: ''}" @on-click-more="showMenus = true">投票结果</x-header>
      <div id="main" style="width: 100%;height: 100%;position: absolute;box-sizing: border-box;padding-bottom: 110px;padding-top: 50px;top:0">
        
      </div>
      <x-button v-if="true" type="primary" link="BACK"  style="position: absolute; bottom: 70px;">上一题</x-button>
      <x-button v-if="index === $store.state.questionList.length" type="primary" link="BACK" style="position: absolute; bottom: 10px;">下一题</x-button>
  </div>
</template>

<script scoped>
import { Cell, Group, Picker, GroupTitle, XTextarea, XHeader, XButton, Icon } from 'vux'
import store from '@/store'
import echarts from 'echarts'
import axios from 'axios'
require('es6-promise').polyfill()

export default {
  store,
  components: {
    Picker,
    GroupTitle,
    Cell,
    Group,
    XTextarea,
    XHeader,
    XButton,
    Icon
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      axios.get(this.$store.state.url + '/VoteManage/GetQuestionVote.ashx', {params: {QuestionID: this.$route.params.id}})
      .then((rs) => {
        let data = rs.data
        if (data.result) {
          if (data.message.length < this.PageSize) {
            this.noMore = true
          }
          this.data = [...this.data, ...data.message]
        } else {
          this.$vux.toast.text(data.tip, 'bottom')
        }
      })
      .catch(function (response) {
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
      })
    },
    chartCreate () {
      var myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '1.你最中意的名胜古迹',
          subtext: '我的投票测试'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        series: [
          {
            type: 'bar',
            data: [10, 60, 100, 1, 5000, 5]
          }
        ]
      })
    },
    changeQuestion (flag) {
      if (flag === 'up') {
        this.index -= 1
      } else {
        var el = document.querySelectorAll('input[name=answer]')
        var i = 0
        for (; i < el.length; i++) {
          if (el[i].checked) {
            break
          }
        }
        if (el.length === i) {
          this.$vux.toast.text('请选择', 'bottom')
          return
        }
        var answerList = this.$store.state.answerList
        this.$store.commit('updateState', {key: 'answerList', value: answerList})
        this.index += 1
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.index = 0
    })
  },
  data () {
    return {
      index: 0,
      answerList: []
    }
  }
}
</script>
<style>
  .ui-answer-list{
    padding-bottom: 30px
  }
  .ui-answer-list > img{
    margin: 0 auto;
    width: 60%;
    display: block;
  }
  .ui-toupiao-complete > div{
    text-align: center;
    padding: 30px;
  }
</style>
